<html>
<head>
    <title>用户管理</title>
    <!---引入layui框架的css样式 --->
    <link href="/lib/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top: 15px">

        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" id="search1" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" id="search2" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select  id="select1">
                    <option value="2">所有</option>
                    <option value="0" selected>正常</option>
                    <option value="1">停用</option>
                </select>
            </div>
        </div>

        <input id="sear" type="button" value="查询" class="layui-btn layui-btn-primary">
        <table id="uTable"></table>
    </div>
</form>
<!--状态切换的模板-->
<script id="ID-table-demo-templet-switch" type="text/html" th:inline="none">
    <input type="checkbox" name="status" value="{{= d.id }}" title="|冻结" lay-skin="switch" lay-filter="demo-templet-status" {{=d.status==0?'checked':''}}>
</script>

<script id="template1" type="text/html" th:inline="none">
    <input lay-event="reset" type="button" class="layui-btn layui-btn-xs layui-bg-red" value="重置密码"/>
</script>



<script src="/lib/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script th:inline="none">
    //告诉浏览器加载layui框架中哪些组件
    //加载完小组件 就执行function
    layui.use(['table','layer','form','upload'],function(){
        // console.log("123");
        //第一步：先对加载的组件起名字
        var table=layui.table;
        var layer=layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        var upload = layui.upload;

        //给查询按钮绑定事件
        $("#sear").on("click",function (){
            //用js发起一个请求去要一些数据回来，要到之后把数据插入到table中
            //通过table组件渲染表格
            table.render({
                elem:"#uTable",
                url:"/member/select",
                cols:[[
                    {title: "选择", type: "checkbox"},
                    {title:"ID",field:"id"},
                    {title: "用户名",field:"username"},
                    {title: "密码",field: "password"},
                    {title: "姓名",field: "name"},
                    {title: "电话",field: "tel"},
                    {title: '状态', width:90, templet: '#ID-table-demo-templet-switch'},
                    {title:"头像",field:"avatar"},
                    {title: "操作", templet: "#template1"}
                ]],
                where:{username:$("#search1").val(),name:$("#search2").val(),status:$("#select1").val()},
                page:true,
                limits:[5,10,20],
                limit:5
            });
        }).click();

        //给切换状态绑定事件
        form.on('switch(demo-templet-status)', function(obj){
            console.log(obj.value);//要根据商品的ID
            console.log(obj.elem.checked);//true就是上架，false就是下架
            $.post("/member/status",{id:obj.value,status: obj.elem.checked?0:1},function (){
                layer.msg("更新状态成功");
            });
        });

        table.on("tool", function(obj) {
            var event = obj.event;
            var data = obj.data;

            if (event === "reset") {
                layer.confirm("确定要重置密码吗？", function(index) {
                    $.post("/member/reset", data, function() {
                        layer.closeAll();
                        layer.msg("重置成功")
                    });
                    layer.close(index);
                });
            }
        });

    })
</script>
</body>
</html>

